<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item>首页</el-breadcrumb-item>
      <el-breadcrumb-item>素材库管理</el-breadcrumb-item>
      <el-breadcrumb-item>我的素材库</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片区域 -->
    <el-card>
      我的素材库
      <el-tabs v-model="activeName" type="card">
        <el-tab-pane label="可用素材" name="first">
          <div class="materialType">素材类别</div>
          <el-select v-model="value" clearable placeholder="--请选择--" class="materialSelect">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
          <el-select v-model="value1" clearable placeholder="--请选择--" class="materialSelect">
            <el-option
              v-for="item in options1"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
          <el-input placeholder="输入想要搜索的素材名称" v-model="search" class="input-with-select">
            <el-button @click="handle" slot="append">搜索</el-button>
          </el-input>
          <div class="myMaterial">｜我的素材</div>
          <div class="topMaterial">
            <div class="material_p" v-for="(item,index) in listMaterial" :key="index">
              <div class="picture">
                <img
                  src="https://www.splitshire.com/wp-content/uploads/2016/02/SplitShire-2851.jpg"
                  alt
                />
              </div>
              <p>{{item.material_name}}</p>
              <p>{{item.vegetable}}</p>
            </div>
          </div>
          <!-- 已购买素材部分 -->
          <div class="buyMaterial">｜已购买素材</div>
          <el-button @click="$router.push('/goods')" class="moveButton">点击跳转素材商城查看</el-button>
          <div class="bottonMaterial">
            <div class="material_b" v-for="(item,index) in listsMaterial" :key="index">
              <div class="picture">
                <img
                  src="https://www.splitshire.com/wp-content/uploads/2016/02/SplitShire-2851.jpg"
                  alt
                />
              </div>
              <p>{{item.material_name}}</p>
              <p>{{item.vegetable}}</p>
              <p>{{item.upLoader}}</p>
              <p>{{item.price}}</p>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="共享素材" name="second">
          <div class="materialState">
            素材状态
            <el-select v-model="value2" clearable class="materialSelect">
              <el-option
                v-for="item in options2"
                :key="item.value2"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </div>
          <div class="materialType1">素材类别</div>
          <el-select v-model="value3" clearable placeholder="--请选择--" class="materialSelect">
            <el-option
              v-for="item in options3"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
          <el-select v-model="value4" clearable placeholder="--请选择--" class="materialSelect">
            <el-option
              v-for="item in options4"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
          <el-input placeholder="输入想要搜索的素材名称" v-model="input3" class="input-with-select">
            <el-button @click="handle1" slot="append">搜索</el-button>
          </el-input>
          <div class="uploadMaterial">
            <el-button type="primary" @click="dialogVisible = true">上传素材</el-button>
            <el-dialog
              title="上传素材"
              :visible.sync="dialogVisible"
              width="30%"
              :before-close="handleClose"
            >
              <!-- 上传素材的提交内容页面 -->
              <div class="materialName">
                <el-form ref="form" :model="form" label-width="100px">
                  <el-form-item label="素材名称:">
                    <el-input v-model="form.name" class="formName"></el-input>
                  </el-form-item>
                  <el-form-item label="素材类别:">
                    <el-select v-model="form.region" placeholder="--请选择--" class="formSelect">
                      <el-option label="类别1" value="type1"></el-option>
                      <el-option label="类别2" value="type2"></el-option>
                      <el-option label="类别3" value="type3"></el-option>
                    </el-select>
                    <el-select v-model="form.region1" placeholder="--请选择--" class="formSelect1">
                      <el-option label="子类别1" value="subType1"></el-option>
                      <el-option label="子类别2" value="subType2"></el-option>
                      <el-option label="子类别3" value="subType3"></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="素材价格:">
                    <el-input v-model="form.price" class="inputPrice"></el-input>元
                  </el-form-item>
                  <el-form-item>
                    <el-upload
                      action="https://jsonplaceholder.typicode.com/posts/"
                      list-type="picture-card"
                      :on-preview="handlePictureCardPreview"
                      :on-remove="handleRemove"
                    >
                      <i class="el-icon-plus"></i>
                    </el-upload>
                    <span class="remarks">注：请确保本素材的知识产权归您本人所有，因知识产权导致的法律责任由您自主承担，本平台仅审核图片内容是否违法。</span>
                  </el-form-item>
                  <el-form-item>
                    <el-button type="primary" @click="onSubmit">提交审核</el-button>
                  </el-form-item>
                </el-form>
              </div>
            </el-dialog>
          </div>
          <!-- 共享素材里的素材 -->
          <div class="allSharedMaterial">
            <div class="material_s" v-for="(item,index) in lists2Material" :key="index">
              <div class="picture2">
                <img
                  src="https://www.splitshire.com/wp-content/uploads/2016/02/SplitShire-2851.jpg"
                  alt
                />
              </div>
              <span>{{item.material_name}}</span>
              <a href="javascript:;" class="itemRight">{{item.state}}</a>
              <p>{{item.vegetable}}</p>
              <div class="audit">
                <span>{{item.price}}</span>
                <span class="bottomAudit">{{item.auditState}}</span>
              </div>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>

import '@/mock/yyzmock.js'
export default {
  name: '',
  components: {},
  props: {},
  data () {
    return {
      activeName: 'first',
      options: [{
        value: '选项1',
        label: '类别1'
      }, {
        value: '选项2',
        label: '类别2'
      },
      {
        value: '选项3',
        label: '........'
      }],

      options1: [{
        value: 'xuanxiang1',
        label: '子类别1'
      }, {
        value: 'xuanxiang2',
        label: '子类别2'
      },
      {
        value: 'xuanxiang3',
        label: '........'
      }],
      options2: [{
        value: 'quanbusucai',
        label: '全部素材'
      }, {
        value: 'shenhezhong',
        label: '审核中'
      }, {
        value: 'shangjia',
        label: '上架'
      }, {
        value: 'xiajia',
        label: '下架'
      }, {
        value: 'shenhebutongguo',
        label: '审核不通过'
      }],
      options3: [{
        value: '选项1',
        label: '类别1'
      }, {
        value: '选项2',
        label: '类别2'
      },
      {
        value: '选项3',
        label: '........'
      }],

      options4: [{
        value: 'xuanxiang1',
        label: '子类别1'
      }, {
        value: 'xuanxiang2',
        label: '子类别2'
      },
      {
        value: 'xuanxiang3',
        label: '........'
      }],
      form: {
        name: '',
        region: '',
        region1: '',
        price: ''
      },
      value: '',
      value1: '',
      value2: '全部素材',
      value3: '',
      value4: '',
      search: '',
      input3: '',
      listMaterial: [],
      listsMaterial: [],
      lists2Material: [],
      dialogVisible: false,
      dialogImageUrl: '',
      searchList: [],
      inputList: []
    }
  },
  computed: {},
  watch: {},
  created () {
    this.requestMock()
    this.requestMock1()
    this.requestMock2()
  },
  mounted () {
    // console.log(this.$router)
  },
  methods: {
    async requestMock () {
      const { data } = await this.axios.get('/material')
      // console.log(data)
      this.listMaterial = data.data
      this.searchList = data.data
      // console.log(this.listMaterial)
    },
    async requestMock1 () {
      const { data } = await this.axios.get('/buyMaterial')
      this.listsMaterial = data.data
      this.inputList = data.data
    },
    async requestMock2 () {
      const { data } = await this.axios.get('/sharedMaterial')
      this.lists2Material = data.data
    },
    handleClose (done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => { })
    },
    onSubmit () {
      // console.log('submit!')
    },
    handleRemove (file, fileList) {
      // console.log(file, fileList)
    },
    handlePictureCardPreview (file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    handle () {
      if (this.search !== '') {
        this.listMaterial = this.listMaterial.filter(item => item.material_name === this.search)
      } else {
        this.listMaterial = this.searchList
      }
    },
    handle1 () {
      if (this.input3 !== '') {
        this.lists2Material = this.lists2Material.filter(item => item.material_name === this.input3)
      } else {
        this.lists2Material = this.inputList
      }
    }
  }
}
</script>

<style scoped lang="less">
.el-card {
  .el-tabs {
    margin-top: 20px;
    .el-tab-pane {
      // 可用素材中的素材类别
      .materialType {
        display: inline-block;
      }
      // 共享素材中的素材类别
      .materialType1 {
        display: inline-block;
      }
      .materialSelect {
        margin-top: 40px;
        padding-left: 10px;
      }
      .input-with-select {
        margin-left: 100px;
        width: 300px;
      }
      .myMaterial {
        margin-top: 40px;
        margin-bottom: 20px;
      }
      .topMaterial,
      .bottonMaterial {
        display: flex;
        flex-wrap: wrap;
        .material_p,
        .material_b {
          width: 20%;
          .picture img {
            border: 10px solid #ccc;
            width: 150px;
            height: 120px;
          }
          p {
            font-size: 13px;
          }
        }
      }
      .buyMaterial {
        display: inline-block;
        margin: 10px 200px 20px 0;
      }
      /deep/ .moveButton {
        border: none;
        color: #244af1;
        text-decoration: underline;
      }
      .uploadMaterial {
        margin: 20px 0 20px 20px;
        .materialName {
          .formName {
            width: 250px;
          }
          .formSelect,
          .formSelect1 {
            width: 250px;
          }
          .formSelect1 {
            margin-top: 20px;
          }
          .inputPrice {
            width: 200px;
            margin-right: 10px;
          }
          .remarks {
            font-size: 12px;
            color: red;
          }
        }
      }
      .allSharedMaterial {
        display: flex;
        flex-wrap: wrap;
        .material_s {
          width: 20%;
          .picture2 img {
            border: 10px solid #ccc;
            width: 150px;
            height: 120px;
          }
          p,
          span,
          a {
            font-size: 13px;
          }
          .itemRight {
            margin-left: 80px;
          }
          .audit {
            width: 170px;
            display: flex;
            justify-content: space-between;
          }
        }
      }
    }
  }
}
</style>
